<template>
  <div class="rose-echart">
    <baseEchart :options="options"></baseEchart>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from "vue"
import baseEchart from "@/base-ui/echart"
import type { IDataType } from "../types"

// 定义 props 并设置默认值
const props = defineProps<{
  roseData: IDataType[]
}>()

const options = computed(() => {
  return {
    legend: {
      top: "bottom"
    },
    series: [
      {
        name: "类别数据",
        type: "pie",
        radius: [10, 100],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8
        },
        data: props.roseData
      }
    ]
  }
})
</script>

<style scoped lang="less"></style>
